<template>
  <view class="inventoryInfo">
    <view class="filter">
      <view class="date box">
        <uni-datetime-picker
          type="datetime"
          @maskClick="datetimePicker = false"
          v-model="datetimesingle"
          @change="changeLog"
        >
          <view class="temp" @click="datetimePicker = true">
            {{ datetimesingle ? datetimesingle.slice(0, 10) : "点击筛选日期" }}
            <u-icon
              v-if="!datetimePicker"
              name="arrow-down-fill"
              color="#ff4254"
              size="10"
            ></u-icon>
            <u-icon
              v-else
              name="play-right-fill"
              color="#ff4254"
              size="10"
            ></u-icon>
          </view>
        </uni-datetime-picker>
      </view>
      <view class="info box" @click="showType = true">
        {{ numType.name }}
        <u-icon name="arrow-down-fill" color="#ff4254" size="10"></u-icon>
      </view>
    </view>
    <scroll-view
      scroll-y="true"
      :style="{ height: mainHeight }"
      class="scrollView"
    >
      <view class="list" v-for="(item, index) in detailList" :key="index">
        <view class="title">
          <view class="">库存变动类型：{{ item.variationType }}</view>
          <view class=""
            >{{ item.numType == 1 ? "+" : "-" }}{{ item.num }}</view
          >
        </view>
        <view class="time">{{ item.createTime }}</view>
        <view class="goods">商品：{{ item.goodName }}</view>
      </view>
      <view class="noMore">没有更多了~</view>
    </scroll-view>

    <u-action-sheet
      :show="showType"
      :actions="actions"
      @close="showSex = false"
      @select="typeSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
import mineApi from "@/api/mine";
export default {
  data() {
    return {
      id: null,
      datetimesingle: "",
      datetimePicker: false,
      mainHeight: "",
      detailList: [],
      showType: false,
      actions: [
        {
          name: "增加库存明细",
          id: 1,
        },
        {
          name: "减少库存明细",
          id: 2,
        },
      ],
      numType: {
        name: "增加库存明细",
        id: 1,
      },
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.mainHeight =
      this.$store.getters.heightData.noTabMainHeight - 30 + "px";

    this.getCloudDetail();
  },
  methods: {
    getCloudDetail() {
      let data = {
        cloudInventoryId: this.id,
        startDate: this.datetimesingle.slice(0, 10),
        numType: this.numType.id,
			  pageNum:1,
			  pageSize:9999,
      };
      if (this.id == "undefined"||this.id == undefined) {
        delete data.cloudInventoryId;
      }
      if (this.datetimesingle == "") {
        delete data.startDate;
      }
      mineApi.getCloudDetail(data).then((res) => {
        if (res.code == 200) {
          this.detailList = res.rows;
        }
      });
    },

    changeLog(e) {
      console.log("change事件:", e);
      this.getCloudDetail();
      this.datetimePicker = false;
    },
    typeSelect(e) {
      this.numType = e;
      this.getCloudDetail();
      this.showType = false;
    },
  },
};
</script>

<style lang="less" scoped>
.inventoryInfo {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .filter {
    width: 100%;
    height: 50px;
    box-shadow: 0 -5px 5px 8px #adadad;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .box {
      width: 38%;
      height: 80%;
      background-color: #f8f8f8;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .temp {
        display: flex;
        width: 100%;
        justify-content: space-around;
      }
      .info {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }

  .scrollView {
    width: 100%;
    padding: 5px 8px;

    .list {
      width: 100%;
      height: 80px;
      border-bottom: 1px solid #e4e2e2;
      padding: 5px 8px;
      color: #787777;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        color: #000;
        display: flex;
        justify-content: space-between;
        font-size: 17px;
      }
    }

    .noMore {
      width: 100%;
      color: #787777;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>
